<template>
	<view class="reply-list">
		<view class="list-wrapper">
			<view class="item" v-for="(item, index) in list" :key="index" @tap="goStore(item.store_id)">
				<view class="info">
					<view class="name">{{item.name}}</view>
					<view class="address">{{item.shop_address}}</view>
				</view>
				<text class="iconfont icon-dianhua1" @tap.stop="callPhone(index)"></text>
			</view>
		</view>
		
		<view :class="'shareBtnsContent contact-box ' + (showPhoneBox ? 'active' :'')">
			<view class="title desc"><lang keywords="请选择联系客服的方式" chineseTxt="请选择联系客服的方式"></lang></view>
			<view class="list">
				<view class="desc" v-for="(item, index) in phoneList" :key="index" @tap="callPhoneMask(item)">{{item}}</view>
			</view>
			<button class="btn" @tap="closeMask('showPhoneBox')"><lang keywords="取消" chineseTxt="取消"></lang></button>
		</view>
		<view class="mask_bg" v-show="showPhoneBox" @tap="closeMask('showPhoneBox')"></view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	var _this
	export default {
		data () {
			return {
				mer_id: '',
				showPhoneBox: false,
				list: [],
				phoneList: []
			}
		},
		onLoad (options) {
			_this = this
			_this.mer_id = options.mer_id
			_this.getList()
		},
		methods: {
			goStore (store_id) {
				uni.navigateTo({
					url: '/pages/store/homePage?store_id=' + store_id
				})
			},
			// 点击电话图标
			callPhone (index) {
			    let list = _this.list[index].phone
				console.log('11111111111', list)
				if (list.length == 1) {
					uni.makePhoneCall({
						phoneNumber: list[0]
					});
				} else if (list.length > 1) {
					_this.phoneList = list
					this.showPhoneBox = true
				} else {
					uni.showToast({
						title: common.changeTxt('当前店铺暂未设置电话')
					})
				}
			},
			callPhoneMask (phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
				this.showPhoneBox = false
			},
			getList () {
				common.post('Merchant&a=merchant_store', {mer_id: _this.mer_id}, (data) => {
					if (data) {
						data.map(item => {
							item.phone = item.phone.split(' ')
							return item
						})
						_this.list = data
						console.log('11111', _this.list)
					}
				})
			}
		}
	}
</script>

<style>
	.reply-list{
		background: #fff;
	}
	.list-wrapper{
		padding: 0 10px;
	}
	.list-wrapper .item{
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f2f2f2;
		overflow: hidden;
	}
	.list-wrapper .item:last-child{
		border: none;
	}
	.list-wrapper .item .info{
		flex-grow: 1;
		padding-right: 5px;
	}
	.list-wrapper .item .address{
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}
	.list-wrapper .item .iconfont{
		font-size: 32px;
		color: #dd1d1d;
		padding: 5px;
	}
	
	/* 联系电话弹窗 */
	.mask_bg {
		position: fixed;
		z-index: 1000000000;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.5;
		
	}
	
	.shareBtnsContent {
		position: fixed;
		z-index: 1000000001;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		transition: all .3s ease;
		-webkit-transition: all .3s ease;
		transform: translate(0, 150%);
		-webkit-transform: translate(0, 150%)
	}
	
	.shareBtnsContent.active {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0)
	}
	
	.shareBtnsContent.contact-box {
		padding: 10px;
		width: auto;
		background: transparent;
		right: 0;
		max-height: 70%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		color: #333;
		font-size: 16px;
	}
	.shareBtnsContent.contact-box .title{
		border-radius: 5px 5px 0 0;
	}
	.shareBtnsContent.contact-box .desc{
		background: #fff;
		line-height: 2.55555556;
		border-bottom: 1px solid #f2f2f2;
		background: rgba(255, 255, 255, .98);
		text-align: center;
	}
	.shareBtnsContent.contact-box .list{
		flex-grow: 1;
		overflow-y: auto;
		margin-bottom: 10px;
		border-radius: 0 0 5px 5px;
	}
	.shareBtnsContent.contact-box .list .desc{
		color: #E73D43;
	}
	.shareBtnsContent.contact-box .list .desc:last-child{
		border: none;
	}
	.shareBtnsContent.contact-box .btn{
		font-size: 16px;
		width: 100%;
		background: rgba(255, 255, 255, .98);
		flex-shrink: 0;
	}
</style>
